﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
        <link rel="stylesheet" href="css/bootstrap-select.css">
        <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 
        <script type="text/javascript" src="js/bootstrap-select.js"></script> 
    </head>
    <body>
<h3>普通类</h3>
<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>带提示性标题</h3>
<select class="selectpicker" title="请选择">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>带分组类</h3>
<select class="selectpicker">
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

<h3>带分组，可多选，有限制</h3>
<select class="selectpicker" multiple>
  <optgroup label="Condiments" data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Breads" data-max-options="2">
    <option>Plain</option>
    <option>Steamed</option>
    <option>Toasted</option>
  </optgroup>
</select>

<h3>可多选类，无限制</h3>
<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>可多选，但有限制</h3>
<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>带搜索框类</h3>
<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

<h3>选中内容的title</h3>
<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>

<h3>统计选中的个数，需与可多选结合使用</h3>
<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>当选择的个数大于3时进行统计</h3>
<select class="selectpicker" multiple data-selected-text-format="count > 3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

<h3>带背景颜色类</h3>
<select class="selectpicker" data-style="btn-primary">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-info">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-success">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-warning">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-danger">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<h3>选中后带对号</h3>
<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>下拉列表顶部带三角</h3>
<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>利用bootstrap网格结构</h3>
<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

<h3>控制宽度</h3>
<select class="selectpicker" data-width="auto">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<select class="selectpicker" data-width="fit">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<select class="selectpicker" data-width="260px">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<select class="selectpicker" data-width="75%">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<h3>带图标</h3>
<select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
</select>

<h3>自定义标签</h3>
<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>


<h3>带全部选中和全部删除按钮</h3>
<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>带关闭箭头</h3>
<select class="selectpicker" data-header="Select a condiment">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>禁止操作</h3>
<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>


    </body>
</html>